<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Hello, Bootstrap Table!</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="panel1-tab" data-toggle="tab" href="#panel1" role="tab" aria-controls="panel1" aria-selected="true">总览</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="panel2-tab" data-toggle="tab" href="#panel2" role="tab" aria-controls="panel2" aria-selected="false">数据</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="panel1" role="tabpanel" aria-labelledby="panel1-tab">
        <div class="card">
          <div class="card-body">
            <div class="input-group" style="width: 80%;margin: auto;display: flex;margin: 45px auto;">
              <input id="input" type="text" class="form-control input-lg" placeholder="">
              <span id="search" class="input-group-addon btn btn-primary" style="width: 150px;display: flex;align-items: center;justify-content: center;">Search</span>
            </div>
            <div class="alert alert-info" role="alert">
              输入 id:ZY010000032433可以查询id为ZY010000032433的电子病历</br>
              输入 predict:肺结核可以查询预测结果中含有肺结核的电子病历</br>
              输入 label:肺结核可以查询真实标签中含有肺结核的电子病历</br>
              支持组合查询，用##间隔即可，例如 predict:肺结核##label:肺结核可以查询预测中有肺结核，实际标签中也有肺结核的电子病历。
            </div>
            <table id="summay-table" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th style='text-align: center;'>
                    name
                  </th>
                  <th style='text-align: center;'>
                    precision 
                  </th>
                  <th style='text-align: center;'>
                    recall 
                  </th>
                  <th style='text-align: center;'>
                    f1-score
                  </th>
                  <th style='text-align: center;'>
                    support
                  </th>
                </tr>
              </thead>
              <tbody>
                {% for item in report %}
                <tr>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.name}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.precision}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.recall}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.f1_score}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.support}}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="panel2" role="tabpanel" aria-labelledby="panel2-tab">
        <div class="card">
          <div class="card-body">
            <table id="mytable" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th style='text-align: center;'>
                    id
                  </th>
                  <th style='text-align: center;'>
                    text
                  </th>
                  <th style='text-align: center;'>
                    predict
                  </th>
                  <th style='text-align: center;'>
                    label
                  </th>
                </tr>
              </thead>
              <tbody>
                {% for item in data %}
                <tr>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.id}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.text}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.predict}}
                  </td>
                  <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                    {{item.label}}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

  <script>
    $(document).ready(function () {
      $("#mytable").bootstrapTable({
        // url:"/findALL",  //请求地址
        striped: true, //是否显示行间隔色
        pageNumber: 1, //初始化加载第一页
        pagination: true,//是否分页
        sidePagination: 'client',//server:服务器端分页|client：前端分页
        pageSize: 5,//单页记录数
        pageList: [5, 10, 15, 20],//可选择单页记录数
        showRefresh: true,//刷新按钮
        filterControl: true,

        columns: [{
          title: 'id',
          field: 'id',
          sortable: true,
          formatter: function (value, row, index) {
             console.log(value,row,index);
             return "<a href=\"/item?id="+row.id+"\">"+value+"</a>";
          }
        }, {
          title: 'text',
          field: 'text',
          sortable: false,
        }, {
          title: 'predict',
          field: 'predict',
          sortable: false
        }, {
          title: 'label',
          field: 'label',
          sortable: false
        }]
      });
      $("#search").bind("click",function(){
        var params = {};
        params.query = $("#input").val();
        $.get("/search",params,function(data,status){
            console.log(data);
            searchData = data.data;
            $("#mytable").bootstrapTable('removeAll');
            $("#mytable").bootstrapTable('append', searchData);
        });
      });
    });
  </script>
</body>

</html>